<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
    <title>Flying Saucer: CSS Margin, Padding and Background Support</title>
    <style type="text/css">
      div {
          margin: 5px;
          border: 1px solid black;
          width: 500px; }
      div.test3 {
          background-color:#ccffcc;
          border-width: 20px;
          border-style: solid;
          border-color: #000000;
          padding: 20px;
          margin: 20px;
          }
      div.test4 {
          height: 75px;
          background-image: url(image.png);
          background-repeat: no-repeat;
          }
      div.test7 {
          height: 75px;
          background-image: url(image.png);
          background-repeat: repeat;
          }
      div.test8 {
          height: 75px;
          background-image: url(image.png);
          background-repeat: repeat;
          background-attachment: fixed;
          }
    </style>
  </head>
  <body>
    <p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
    <p class="link right-link"><a href="demoNav:forward">Next Page</a></p>

    <p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
    <span id="pagebyline">
      CSS 
      <span style="border: 1px solid black; margin: 10px;">Margin</span>, 
      <span style="border: 1px solid black; padding: 10px;">Paddings</span> and 
      <span style="background-color: silver">Backgrounds</span>
    </span><br />
      <p><b>XMargin, padding and background support includes</b>: CSS margin and padding, on any or all four sides of a
		  box. You can apply both  shorthand ("padding: 1px") or to individual sides ("margin-left: 10em").
		  Backgrounds can be colored and/or include images (as background attachments). Background images can be
		  repeated horizontally, vertically, or both, and fixed in place.</p>
    <br />

    <div style="width: 100%; border: 0px; ">
    <h3>Margins</h3>

    <div class="test10" style="margin: 0px;">margins: 0px</div>

    <div class="test11" style="margin: 20px;">margins: 20px</div>

    <div class="test12" style="margin: 10px 20px 30px 40px;">margins: 10px 20px 30px 40px</div>

    <h3>Padding</h3>

    <div class="test20" style="padding: 0px;">padding: 0px</div>
    <div class="test21" style="padding: 20px;">padding: 20px</div>
    <div class="test22" style="padding: 10px 20px 30px 40px;">padding: 10px 20px 30px 40px</div>

    <h3>Backgrounds</h3>
    <div class="test3" style="width: 75%">
<pre>
{
          background-color:#ccffcc;
          border-width: 20px;
          border-style: solid;
          border-color: #000000;
          padding: 20px;
          margin: 20px;
}	
</pre>

		</div>
    <div class="test4">div with image back and no repeat</div>
    <div class="test7">div with image back and repeat both</div>
    <div class="test8">div with fixed image background and repeat both</div>
    </div>
  </body>
</html>

